<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<style>
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .red {
    background: red;
  }
  .green {
    background: green;
  }
  .orange {
    background: orange;
  }
  .size {
    font-size: 30px;
  }
  li {
    border: 1px solid;
    line-height: 40px;
  }
</style>
<body>
  <div class="app">
    <button @click="num++">+</button>
    {{ num }}
    <button @click="num--" :disabled="num <= 0">-</button>
    <!-- class 和 style 属性使用 v-bind 时可以传入数组或对象 -->
    <!-- <div :class="['box', 'size', num > 0 ? 'red' : '']">box</div> -->
    <!-- <div :class="{ box: true, size: true, red: num > 0 }">box</div> -->
    <!-- <div :class="['box', 'size', {
      red: num > 0 && num <= 10,
      green: num > 10 && num <= 20,
      orange: num > 20 && num <= 30,
    }]">box</div> -->
    <!-- <div class="box" :style="[{ fontSize: '30px', color: 'red' }, { background: 'green' }]">box</div> -->
    <p>当前高亮下标 activeIndex： {{ activeIndex }}</p>
    <ul>
      <li
        v-for="(item, index) in navList"
        :class="{ orange: activeIndex === index }"
        @click="activeIndex = index"
      >{{ item }} --- {{ index }}</li>
    </ul>
  </div>

  <script>

    // 实例化 vue 对象
    const vm = new Vue({
      el: '.app', // 挂载的元素，能使用 vue 语法的元素
      data: { // 定义 vue 数据，data 中的数据会添加到 vue 实例中
        num: 0,
        navList: ['周杰伦', '林俊杰', '陶喆', '王力宏'],
        activeIndex: -1 // 高亮下标
      },
      methods: { // 定义函数，函数中的 this 指向 vue 实例对象，函数不能是箭头函数
      }
    })

  </script>
</body>
</html>